<template>
  <div id="app">
    <Loading :active="!db" :can-cancel="false" :is-full-page="true" color="white"></Loading>
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <el-row v-if="db">
      <el-col class="title">第三届天王山圣杯争夺战</el-col>
      <el-row class="sec-countdown">
        <el-col :span="24">
          <countdown :round="round"/>
        </el-col>
      </el-row>
      <el-divider>奖金池</el-divider>
      <el-row class="section sec-pool">
        <pool :pool="db.pool"/>
      </el-row>
      <el-divider>参与者</el-divider>
      <el-row class="section sec-fundlist">
        <fundlist :members="members" :currentRound="db.currentRound"/>
      </el-row>
      <el-divider v-if="db.outMembers.length">出局者</el-divider>
      <el-row v-if="db.outMembers.length" class="section sec-outlist">
        <outlist :members="db.outMembers"/>
      </el-row>
      <el-divider>事件记录</el-divider>
      <el-row class="section sec-event">
        <el-row v-for="event in db.events" :key="event.date">
          <el-col :span="12" class="date">{{ new Date(event.date).toLocaleString() }}</el-col>
          <el-col :span="12">{{ event.text }}</el-col>
        </el-row>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="4" style="text-align:center">
          <el-link :underline="false" @click="ruleVisible = true" :style="{'font-size': '1em'}">查看规则</el-link>
          <el-dialog title="PK 规则" :visible.sync="ruleVisible" width="70%">
            <!-- <img
              style="width: 100%"
              src="//wx1.sinaimg.cn/large/005IpIELly1g4exoail1rj30u037nx6p.jpg"
            >-->
            <img style="width: 100%" src="./assets/天王山2020规则final.png">
            <!-- <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="ruleVisible = false">确 定</el-button>
            </span>-->
          </el-dialog>
        </el-col>
      </el-row>
      <el-row class="section footer">
        <p>反馈 BUG 请联系 revol.cai@gmail.com</p>
        <p>ps: 样式不是我设计的觉得丑不要找我</p>
      </el-row>
    </el-row>
  </div>
</template>

<script>
import countdown from "./components/countdown";
import pool from "./components/pool";
import fundlist from "./components/fundlist";
import outlist from "./components/outlist";
import axios from "axios";
import Loading from "vue-loading-overlay";
import { setInterval } from "timers";

// import keyBy from "lodash/keyBy";
// import assign from "lodash/assign";
// import sortBy from "lodash/sortBy";

export default {
  name: "app",
  data() {
    return {
      db: null,
      ruleVisible: false,
      members: []
    };
  },
  components: {
    countdown,
    pool,
    fundlist,
    outlist,
    Loading
  },
  computed: {
    round() {
      return this.db && this.db.rounds[this.db.currentRound];
    }
  },
  mounted() {
    this.loaddb();
    setInterval(this.loaddb, 20000);
  },
  methods: {
    loaddb() {
      axios.get("./data.js?ver=" + new Date().getTime()).then(res => {
        this.db = eval(res.data);
        this.members = this.db.members;
        // let members = keyBy(this.members, "id");
        // this.db.members.forEach(m => {
        //   if (!members[m.id]) {
        //     members[m.id] = m;
        //   } else {
        //     assign(members[m.id], m);
        //   }
        // });
        // let dbm = keyBy(this.db.members, "id");
        // this.members = sortBy(
        //   Object.values(members).filter(m => dbm[m.id]),
        //   m => m.id
        // );
      });
    }
  }
};
</script>

<style>
#app {
  color: whitesmoke;
  /* max-width: 600px; */
}

@media (orientation: landscape) {
  body {
    max-width: 800px;
  }
}

@media (orientation: portrait) {
  body {
    font-size: 2.8vmin;
  }
}
body {
  margin: 0px auto;
  background-color: black;
}

p {
  margin-block-start: 0px;
  margin-block-end: 0px;
}

.section {
  margin: 1.5em;
}

.title {
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 2.3em;
  font-weight: bold;
  padding: 1em;
}

.footer {
  color: gray;
  font-size: 0.2em;
  font-weight: 100;
  text-align: center;
}

.el-card {
  color: inherit;
  margin: 0.5em 0;
  text-align: center;
  border-radius: 0;
  border: 0.2em solid gray;
  background-color: black;
}

.el-card__body {
  padding: 1em;
}

.el-divider__text {
  background-color: black;
  color: whitesmoke;
}
.sec-event {
  border: 0.2em solid gray;
  padding: 1em;
}
.sec-event .date {
  color: gray;
}
</style>
